<template>
  <Layout :showHome="true" :showD="true" title="任务列表">
    <van-tabs v-model="active">
      <div class="renw">
        <van-tab title="全部">
          <van-cell v-for="item in list" :key="item.id">
                <div class="top" :title="item.id">
                  <span class="coding">{{ item.id }}</span>
                  <span class="title">{{ item.title }} </span
                  ><van-tag plain type="primary" v-if="item.zhipai">指派</van-tag>
                </div>
                <div class="middle">
                  <span class="money">￥{{ Number(item.price).toFixed(2)}}</span>
                  <button v-if="item.status === 1 && item.userStatus === 0" @click="detEvt(item.title, item.status, item.id, item.userStatus)" style="background:#ff8e32;">
                    上传交付物
                  </button>
                  <button v-else-if="item.status === 1 && item.userStatus === 1" @click="detEvt(item.title, item.status, item.id, item.userStatus)" style="background:#74b9fd;">
                    修改交付物
                  </button>
                  <van-button v-else style="background:#fff;border: 1px solid #25aa61;" color="#25aa61" plain round size="small" @click="detEvt(item.title, item.status, item.id, item.userStatus)">查看</van-button>
                </div>
                <div class="bottom">
                  <span class="address">
                    <van-icon name="location" color="#a8afea" />
                    {{ item.address }}</span
                  >
                  <span class="date">{{ item.time }}</span>
                </div>
                <!-- 三角形的状态 -->
                <div class="triangle" v-if="item.status == '1'">
                  <p>进行中</p>
                </div>
               <!--  <div class="triangle—a" v-else-if="item.status == '1'">
                  <p>已报名</p>
                </div> -->
                <div class="triangle-c" v-else-if="item.status == '2'">
                  <p>已完成</p>
                </div>
                <div class="triangle-b" v-else-if="item.status == '3'"><p>已关闭</p></div>
              </van-cell>
          <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
            </van-list>
          </van-pull-refresh> -->
        </van-tab>
      </div>

      <van-tab title="进行中">
        <ul>
          <li v-for="it in conduct" :key="it.id">
            <div class="top">
              <span class="coding">{{ it.id }}</span>
              <span class="title">{{ it.title }} </span
              ><van-tag plain type="primary" v-if="it.zhipai">指派</van-tag>
            </div>
            <div class="middle">
              <span class="money">￥{{ Number(it.price).toFixed(2)}}</span>
              <button
                @click="detEvt(it.title, it.status, it.id, it.userStatus)"
                style="background:#ff8e32;color:#fff"
                v-if="it.userStatus === 0"
              >
                上传交付物
              </button>
              <button @click="detEvt(it.title, it.status, it.id, it.userStatus)" style="background:#74b9fd;color: #fff;border: 0;"
              v-else
              >
                修改交付物
              </button>
            </div>
            <div class="bottom">
              <span class="address">
                <van-icon name="location" color="#a8afea" />
                {{ it.address }}</span
              >
              <span class="date">{{ it.time }}</span>
            </div>
            <!-- 三角形的状态 -->
            <div class="triangle"><p>进行中</p></div>
          </li>
          <li>没有更多了(●'◡'●)</li>
        </ul>
      </van-tab>
      <van-tab title="已完成">
        <ul>
          <li v-for="it in complete" :key="it.id">
            <div class="top">
              <span class="coding">{{ it.id }}</span>
              <span class="title">{{ it.title }} </span
              ><van-tag plain type="primary" v-if="it.zhipai">指派</van-tag>
            </div>
            <div class="middle">
              <span class="money">￥{{ Number(it.price).toFixed(2)}}</span>
              <button style="background:#fff;border: 1px solid #25aa61;color: #25aa61;" @click="detEvt(it.title, it.status, it.id, it.userStatus)">查看</button>
            </div>
            <div class="bottom">
              <span class="address">
                <van-icon name="location" color="#a8afea" />
                {{ it.address }}</span
              >
              <span class="date">{{ it.time }}</span>
            </div>
            <!-- 三角形的状态 -->
            <div class="triangle-c"><p>已完成</p></div>
          </li>
          <li>没有更多了(ง •_•)ง</li>
        </ul>
      </van-tab>
      <van-tab title="已关闭">
        <ul>
          <li v-for="it in close" :key="it.id">
            <div class="top">
              <span class="coding">{{ it.id }}</span>
              <span class="title">{{ it.title }} </span
              ><van-tag plain type="primary" v-if="it.zhipai">指派</van-tag>
            </div>
            <div class="middle">
              <span class="money">￥{{ Number(it.price).toFixed(2)}}</span>
              <button style="background:#fff;border: 1px solid #25aa61;color: #25aa61;" @click="detEvt(it.title, it.status, it.id, it.userStatus)">查看</button>
            </div>
            <div class="bottom">
              <span class="address">
                <van-icon name="location" color="#a8afea" />
                {{ it.address }}</span
              >
              <span class="date">{{ it.time }}</span>
            </div>
            <!-- 三角形的状态 -->
            <div class="triangle-b"><p>已关闭</p></div>
          </li>
          <li>没有更多了(●ˇ∀ˇ●)</li>
        </ul>
      </van-tab>
    </van-tabs>
  </Layout>
</template>

<script>
import { hallListApi } from "@/apis/hallApi";
import { UserApi } from "@/apis/signApi";
export default {
  data() {
    return {
      active: 0,
      // 页面进入的时候，一定要去加载第一页

      value: "",
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      conduct: [],
      complete: [],
      close: [],
      userId: '',
      userInfo: '',
      query: { title: "", status: "", id: "", userStatus: ''}
    };
  },

  created() {
    this.getUser()
    this.getList();
  },
  methods: {
    async getUser () {
      this.userId = this.$store.getters["common/userId"];
      const result = await UserApi(this.userId);
      this.userInfo = result;
      if (this.userInfo.active === 2 && this.userInfo.sign === 1) {
      } else {
        this.$router.push('/home')
        this.$toast.fail('清先完成注册流程')
        return false
      }
    },
    async getList () {
      // 这个接口只会返回当前页的数据，为了数据传输量小
      let result = await hallListApi();

      this.all = result;
      this.list = this.all.filter(item => item.user === 1)
      this.all.find((it) => {
        if (it.status === 1) {
          this.conduct.push(it);
        } else if (it.status === 2) {
          this.complete.push(it);
        } else if (it.status === 3) {
          this.close.push(it);
        }
      });
      // if(result.data.status==3){
      //    this.all= ture
      // }
    },
    // 跳转到交付页面
    detEvt(title, status, id, userStatus) {
      this.query.title = title;
      this.query.status = status;
      this.query.id = id;
      this.query.userStatus = userStatus
      this.$router.push({ path: "/deliverables", query: this.query });
    }

   /*  onLoad() {
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      hallListApi().then((res) => {
        // 如果status状态不是0，则不会出现在大厅中
        let a = [];
        let j = 0;
        for (let i in res) {
          if (res[i].user === 1) {
            a[j++] = res[i];
          }
        }
        for (let i = 0; i < 6; i++) {
          this.list.push(a[i]);
        }
      });

      this.loading = false;
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    }, */
  },
};
</script>

<style lang="less" scoped>
@import "@/style/common.less";

.more {
  display: block;
  width: 100%;
  height: 80px;
  text-align: center;
}
.renw {
  .triangle {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 0px;
    height: 0px;
    border-top: solid 50px #8ad59c;
    border-left: solid 70px transparent;
    > p {
      position: absolute;
      top: -77px !important;
      right: 17px;
      transform: rotate(307deg);
      font-size: 0.5rem;
      color: #fff;
    }
  }
  .triangle—a {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 0px;
    height: 0px;
    border-top: solid 50px #8ad59c;
    border-left: solid 70px transparent;
    > p {
      position: absolute;
      top: -77px;
      right: 17px;
      transform: rotate(307deg);
      font-size: 0.5rem;
      color: #fff;
    }
  }
  .triangle-b {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 0px;
    height: 0px;
    border-top: solid 50px #c4c4c4;
    border-left: solid 70px transparent;
    > p {
      position: absolute;
      top: -77px;
      right: 17px;
      transform: rotate(307deg);
      font-size: 0.5rem;
      color: #fff;
    }
  }
  .triangle-c {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 0px;
    height: 0px;
    border-top: solid 50px #a8caf6;
    border-left: solid 70px transparent;
    > p {
      position: absolute;
      top: -77px;
      right: 17px;
      transform: rotate(307deg);
      font-size: 0.5rem;
      color: #fff;
    }
  }
}
.renw .van-cell {
  margin: auto;
  margin-bottom: 15px;
  margin-top: 20px;
  width: 320px;
  padding: 0;
  background: 247, 248, 250;
  box-shadow: 2px 2px 3px 1px rgba(72, 69, 69, 0.1);
  .more {
    display: block;
    width: 100%;
    height: 80px;
    text-align: center;
  }
  .top {
    display: flex;
  }
  .coding {
    // display: inline-block;
    margin-right: 10px;
  }

  .title {
    font-size: 0.8rem;
    font-weight: 600;
    // display: inline;
    width: 180px;
    // 多行超出隐藏
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden; //溢出内容隐藏
    text-overflow: ellipsis; //文本溢出部分用省略号表示
    display: -webkit-box; //特别显示模式
    -webkit-line-clamp: 1; //行数
    -webkit-box-orient: vertical; //盒子中内容竖直排列
  }

  .middle {
    padding: 10px 0px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }
  .money {
    color: @a1;
    font-size: 1rem;
  }

  button {
    padding: 2px;
    border: none;
    width: 80px;
    background: @a1;
    color: #fff;
    font-size: 0.6rem;
    border-radius: 15px;
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    border-top: solid 1px #e3e4e6;
  }
  .address {
    font-size: 0.7rem;
    font-weight: 400;
    color: @c3;
  }

  .date {
    font-size: 0.7rem;
    font-weight: 400;
    color: @c4;
  }
  .triangle {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 0px;
    height: 0px;
    border-top: solid 50px @a1;
    border-left: solid 70px transparent;
    > p {
      position: absolute;
      top: -66px;
      right: 17px;
      transform: rotate(307deg);
      font-size: 0.5rem;
      color: #fff;
    }
  }
}
.top {
  display: flex;
}
.coding {
  // display: inline-block;
  margin-right: 10px;
}

.title {
  font-size: 0.8rem;
  font-weight: 600;
  // display: inline;
  width: 180px;
  // 多行超出隐藏
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出部分用省略号表示
  display: -webkit-box; //特别显示模式
  -webkit-line-clamp: 1; //行数
  -webkit-box-orient: vertical; //盒子中内容竖直排列
}

.middle {
  padding: 10px 0px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  margin-top: 15px;
}
.money {
  color: @a1;
  font-size: 1rem;
}

button {
  padding: 5px;
  border: none;
  width: 100px;
  background: #fff;
  color: @a1;
  font-size: 0.6rem;
  font-weight: 500;
  border: solid 1px @a1;
  border-radius: 15px;
}

.bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  border-top: solid 1px #e3e4e6;
}
.address {
  font-size: 0.7rem;
  font-weight: 400;
  color: @c3;
}

.date {
  font-size: 0.7rem;
  font-weight: 400;
  color: @c4;
}

ul {
  position: relative;
  background: #fefefe;
  padding: 15px;
  > li:nth-last-child(1) {
    margin-bottom: 100px;
  }
  > li {
    position: relative;
    margin: auto;
    margin-bottom: 15px;
    width: 300px;
    background: 247, 248, 250;
    padding: 10px;
    box-shadow: 2px 2px 3px 1px rgba(72, 69, 69, 0.1);
    > .triangle {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 0px;
      height: 0px;
      border-top: solid 50px @a1;
      border-left: solid 70px transparent;
      > p {
        position: absolute;
        top: -66px;
        right: 17px;
        transform: rotate(307deg);
        font-size: 0.5rem;
        color: #fff;
      }
    }
    > .triangle—a {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 0px;
      height: 0px;
      border-top: solid 50px #8ad59c;
      border-left: solid 70px transparent;
      > p {
        position: absolute;
        top: -66px;
        right: 17px;
        transform: rotate(307deg);
        font-size: 0.5rem;
        color: #fff;
      }
    }
    > .triangle-b {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 0px;
      height: 0px;
      border-top: solid 50px #c4c4c4;
      border-left: solid 70px transparent;
      > p {
        position: absolute;
        top: -66px;
        right: 17px;
        transform: rotate(307deg);
        font-size: 0.5rem;
        color: #fff;
      }
    }
    > .triangle-c {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 0px;
      height: 0px;
      border-top: solid 50px #a8caf6;
      border-left: solid 70px transparent;
      > p {
        position: absolute;
        top: -66px;
        right: 17px;
        transform: rotate(307deg);
        font-size: 0.5rem;
        color: #fff;
      }
    }
    > .top {
      display: flex;
      > .coding {
        // display: inline-block;
        margin-right: 10px;
        font-size: 0.8rem;
        font-weight: 400;
      }
      > .title {
        // display: inline;
        font-size: 0.8rem;
        font-weight: 600;
        width: 180px;
        // 多行超出隐藏
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
        display: -webkit-box; //特别显示模式
        -webkit-line-clamp: 1; //行数
        -webkit-box-orient: vertical; //盒子中内容竖直排列
      }
    }
    > .middle {
      padding: 10px 0px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      > .money {
        color: @a1;
      }
      > button {
        padding: 5px;
        border: none;
        width: 80px;
        background: #fff;
        color: @a1;
        font-size: 0.6rem;
        font-weight: 500;
        border: solid 1px @a1;
        border-radius: 15px;
      }
    }
    > .bottom {
      display: flex;
      justify-content: space-between;
      padding-top: 10px;
      border-top: solid 1px #e3e4e6;
      > .address {
        font-size: 0.7rem;
        font-weight: 400;
        color: @c3;
      }
      > .date {
        font-size: 0.7rem;
        font-weight: 400;
        color: @c4;
      }
    }
  }
}
</style>